button {
  background-color: lightgreen;
  /* 默认按钮背景颜色为淡绿色 */
  border: none;
  /* 去掉按钮的边框 */
  padding: 5px;
  /* 按钮内边距为 5px */
  border-radius: 5px;
  /* 圆角按钮 */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* 背景颜色和文字颜色的平滑过渡效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  /* 按钮的阴影效果 */
}

/* 当鼠标悬停在按钮上时触发的样式 */
button:hover {
  background-color: palevioletred;
  /* 鼠标悬停时按钮背景颜色变为红色 */
  color: white;
  /* 鼠标悬停时按钮文字颜色变为白色 */
}

/* 当按钮被点击时触发的样式 */
button:active {
  background-color: darkgreen;
  /* 点击时按钮背景颜色变为深绿色 */
  color: yellow;
  /* 点击时按钮文字颜色变为黄色 */
  transition: background-color 0.5s ease;
  /* 点击时的背景颜色有 0.5 秒的平滑过渡效果 */
}

/* 当按钮获得焦点（通过键盘或鼠标点击）时触发的样式 */
button:focus {
  background-color: aqua;
  /* 聚焦时按钮背景颜色变为水绿色（aqua） */
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
  /* 聚焦时按钮有一个微弱的阴影效果 */
}

/* 通过 JavaScript 来手动管理按钮的选中状态，并添加一个 selected 类来模拟选中效果。 */
.selected {
  background-color: yellow;
  /* 选中按钮时的颜色 */
  color: black;
}

/* 当按钮选中时， hover 状态背景颜色。和上面一样，保持点击后，不显示hover颜色 */
button.selected:hover {
  background-color: yellow;
  /* 选中按钮时的颜色 */
  color: black;
}

/* 
默认状态（button）：按钮初始状态的样式。
悬停状态（button:hover）：鼠标悬停时触发的样式。
点击状态（button:active）：按钮被点击时触发的样式。
聚焦状态（button:focus）：按钮获得焦点时触发的样式。 */